<template>
  <div>
    <a-button type="primary" @click="showModal">{{ $t('memory_info') }}</a-button>
    <a-modal 
      :title="text"
      centered
      :maskClosable="false"
      :width="800"
      v-model="visible"
    >
      <template slot="footer">
        <a-button key="back" @click="handleCancel">{{ $t('modal_close') }}</a-button>
      </template>
      <p>
        <span class="gb-label">初始值：</span>
        <span>{{formatAmount(data.init)}} Byte</span>
      </p>
      <p>
        <span class="gb-label">大小：</span>
        <span>{{formatAmount(data.committed)}} Byte</span>
      </p>
      <p>
        <span class="gb-label">已使用：</span>
        <span>{{formatAmount(data.used)}} Byte</span>
      </p>
      <p>
        <span class="gb-label">最大：</span>
        <span>{{formatAmount(data.max)}} Byte</span>
      </p>

    </a-modal>
  </div>
</template>
<script>
import axios from 'axios'
import {FormatMoney} from 'format-money-js'
export default {
  props: {
    text: { type: [String] },
  },
  data() {
    return {
      visible: false,
      data: {}
    }
  },
  methods: {
    showModal() {
      this.visible = true
      this.fetch()
    },
    handleCancel() {
      this.visible = false
    },
    formatAmount(val) {
      if (!val) {
        val = 0
      }
      const fm = new FormatMoney({
        decimals: 0
      })
      return fm.from(val)
    },
    fetch() {
      axios({
        url: '/infra/system/memory/find',
        method: 'get',
        params: {
        },
      }).then((res) => {
        this.data = res.data
      }).catch(() => {
        
      }).finally(() => {
      })
    },
  }
}
</script>
